<template>
    <!-- 商品分类导航 -->
    <div class="type-nav">
        <div class="container">
            <div @mouseleave="leaveIndex" @mouseenter="showType">
                <h2 class="all"></h2>

                <!-- 过渡动画 -->
                <!-- <transition name="sort"> -->
                    <!-- 三级联动 -->
                    <div class="sort" v-if="show">
                        <!-- 最好的解决方法是：编程式导航 + 事件委派 -->
                        <div class="all-sort-list2" @click='goSearch'>
                            <!-- 当currentIndex==index时，给这个div加一个class='cur' -->
                            <div class="item" v-for="(c1, index) in this.categoryList" :key="c1.categoryId"
                                :class="{ cur: currentIndex == index }" @mouseenter="changeIndex(index)">
                                <h3>
                                    <!-- 自定义属性,好让goSearch回调函数识别出来并实现路由跳转以及参数的传递-->
                                    <div :data-categoryName="c1.categoryName" :data-categoryId="c1.categoryId">{{
                                        c1.categoryName }}</div>
                                </h3>
                            </div>
                        </div>
                    </div>
                <!-- </transition> -->
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
//引入方式：引入lodash全部功能函数
// import _ from 'lodash'
//引入方式：按需引入
import throttle from 'lodash/throttle'


export default {
    name: 'TypeNav',
    data() {
        return {
            currentIndex: -1,
            show: true,
        }
    },
    mounted() {
        /* 激发store中的action，获取三级列表数据数据，
        不放在App里放TypeNav里的优点：数据每次跳转路由都会获取一次，如数据变化，页面数据能实时更新
        缺点： 每次跳转路由时都会销毁再创建，对服务器压力大*/
        // this.$store.dispatch('categoryList');

        //组件挂载前判断，如果不是home路由组件，隐藏TypeNav
        if (this.$route.path !== '/home') {
            this.show = false
        }
    },
    methods: {
        // 节流
        changeIndex: throttle(function (index) {
            this.currentIndex = index
        }, 50),
        leaveIndex() {
            this.currentIndex = -1;
            if (this.$route.path !== '/home') {
                this.show = false;
            }
        },
        goSearch(event) {
            let element = event.target;
            //节点有一个属性dataset属性，可以获取节点的自定义属性与属性值
            let {categoryname,categoryid} = element.dataset
            //身上有categoryname自定义属性的标签才能速发事件
            if (categoryname) {
                //整理路由跳转的参数
                let location = { name: 'search' };
                let query = { categoryName: categoryname ,categoryId:categoryid};
                
                //路由跳转的时候，如果带有params参数，把原有的params参数带入location并带过去
                if (this.$route.params) {
                    location.params = this.$route.params;
                    //动态给location
                    location.query = query;
                    //路由跳转
                    this.$router.push(location);
                }
            }
        },
        //鼠标移入时，让商品分类列表进行展示
        showType() {
            this.show = true
        }
    },
    computed: {
        ...mapState({
            categoryList: (state) => {
                return state.home.categoryList.slice(0,10)
            }
        })
    }
};
</script>

<style  scoped>
.type-nav {
    border-top: 2px solid #ff6700;
}

.type-nav .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
}
.type-nav .container .sort {
    left: 0;
    top: 5px;
    width: 210px;
    position: absolute;
    background: #9c9692;
    z-index: 999;
}

/* 过度动画开始状态（进入） */
.sort-enter {
    height: 0px;
}

/* 过度动画结束状态（进入） */
.sort-enter-to {
    height: 461px;
}

/* 定义动画时间、速率 */
.sort-enter-active {
    transition: all .5s linear;
    overflow: hidden;
}
.type-nav .container .sort .all-sort-list2{
height: 100%;
}
.type-nav .container .sort .all-sort-list2 .item{
    cursor: pointer;
}
.type-nav .container .sort .all-sort-list2 .item h3 {
    line-height: 51.3px;
    text-indent: 2em;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    padding: 0 20px;
    margin: 0;
    color: #ffffff;

}



.type-nav .container .sort .all-sort-list2 .item .item-list {
    display: none;
    position: absolute;
    width: 734px;
    min-height: 460px;
    background: #ffffff;
    left: 210px;
    border: 1px solid #ddd;
    top: 0;
    z-index: 9999 !important;
}

.type-nav .container .sort .all-sort-list2 .item .item-list .subitem {
    float: left;
    width: 650px;
    padding: 0 2px 0 2px;
}

.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl {
    border-top: 1px solid #eee;
    padding: 3px 0;
    overflow: hidden;
    zoom: 1;
}

.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl.fore {
    border-top: 0;
}

.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl dt {
    float: left;
    width: 54px;
    line-height: 22px;
    text-align: right;
    padding: 3px 6px 0 0;
    font-weight: 700;
}

.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl dd {
    float: left;
    width: 415px;
    padding: 3px 0 0;
    overflow: hidden;
}

.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl dd em {
    float: left;
    height: 14px;
    line-height: 14px;
    padding: 0 8px;
    margin-top: 5px;
    border-left: 1px solid #ccc;
}

.cur {
    background-color: #ff6700;
}
</style>